﻿<%@ Page Language="c#" CodeFile="~/Default.aspx.cs" Inherits="TallComponents.Web.WebForm1" %>

<%@ Register TagPrefix="tc" Namespace="TallComponents.Web" Assembly="App_Code" %>
<%@ Register TagPrefix="tc" Namespace="TallComponents.Web.Pdf" Assembly="TallComponents.Web.PdfViewer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head runat="server">
   <title>Upload & View Demo - PDFWebViewer.NET</title>
   <style type="text/css">
      body
      {
         font-family: Verdana, Arial, Helvetica, _sans;
         font-size: 12px;
      }
      img
      {
         border: 0px;
      }
      .thumb
      {
         display: block;
         margin: 0px;
         padding: 0px;
      }
      .thumb img
      {
         border: solid 1px #999999;
         margin: 3px;
      }
      .thumb:hover img
      {
         border: solid 2px #66ff33;
         margin: 2px;
      }
      .active img
      {
         border: solid 2px black;
         margin: 2px;
      }
      a:active
      {
         outline: 0 none black;
      }
      .searchResult
      {
         border: solid 1px red;
      }
      .bookmark
      {
         font-size: x-small;
      }
      .bookmark:hover
      {
         color: Red;
      }
      .activeBookmark
      {
         font-size: small;
         color: Red;
      }
      
      
      .sidePanel img
      {
         float: right;
      }
      
      .content
      {
         border: 1px solid #444444;
      }
      
      .panel
      {
         background-color: White;
         top: 50px;
         left: 0;
         display: none;
         width: auto;
         height: auto;
      }
      
      .bkmPanel
      {
         background-color: White;
         top: 50px;
         left: 0;
         display: none;
         width: auto;
         height: auto;
      }
      
      .sidePanel .active
      {
         background-color: #ffffff;
         border-color: black;
         border-style: solid;
         border-bottom-width: 1px;
         border-left-width: 1px;
         border-top-width: 1px;
         -moz-border-radius-topright: 0px;
         -webkit-border-top-right-radius: 0px;
         -moz-border-radius-bottomright: 0px;
         -webkit-border-bottom-right-radius: 0px;
         -moz-border-radius-bottomleft: 10px;
         -webkit-border-bottom-left-radius: 10px;
         -moz-border-radius-topleft: 10px;
         -webkit-border-top-left-radius: 10px;
      }
   </style>
   <link rel="Stylesheet" type="text/css" href="modal.css" />
   <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
   <script type="text/javascript">
      $(document).ready(function () {
         $(".triggerThumbs").click(function () {
            var viewer = $find('pdfViewer');
            if (viewer) {
               var doc = viewer.get_document();
               if (doc.IsValid) {
                  $(".panel").slideToggle(0);
                  $(".bkmPanel").hide(0);
                  $(".triggerBookmarks").toggleClass("active", false);
                  $(this).toggleClass("active");
                  $find('thumbnails').update();
               }
            }
            return false;
         });

         $(".triggerBookmarks").click(function () {
            var viewer = $find('pdfViewer');
            if (viewer) {
               var doc = viewer.get_document();
               if (doc.IsValid) {
                  $(".bkmPanel").slideToggle(0);
                  $(".panel").hide(0);
                  $(".triggerThumbs").toggleClass("active", false);
                  $(this).toggleClass("active");
               }
            }
            return false;
         });
      });
   </script>
</head>
<body>
   <form id="Form1" method="post" runat="server" enctype="multipart/form-data">
   <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
         <asp:ScriptReference Path="search.js" />
      </Scripts>
   </asp:ScriptManager>
   <script type="text/javascript">
      Sys.Application.add_load(function () {
         $find('Toolbar').add_buttonClick(function (sender, args) {
            if (args.command == 'open') {
               var modal = $find('Modal1').show(450, 300);
            } else if (args.command == 'close') {
               window.location.href = window.location.href;
            }
         });
      });
   </script>
   <tc:ModalDialog runat="server" ID="Modal1" Title="Upload a file">
      <p>
         <input type="file" size="50" name="pdf" />
      </p>
      <asp:Button runat="server" Text="Upload" ID="uploadPdf" OnClick="uploadPdf_Click" />
      <input type="button" value="Cancel" onclick="$find('Modal1').hide(); return false;" />
   </tc:ModalDialog>
   <table cellpadding="0" cellspacing="2" style="width: auto;">
      <tr>
         <td style="background-color: #dddddd; vertical-align: top">
            <div class="sidePanel" style="float: left; height: 70%; background-color: #dddddd;">
               <div>
                  <a href="#">
                     <img src="thumbnails.png" class="triggerThumbs" style="padding: 5px; margin: 5px 0px 5px 5px" />
                  </a>
               </div>
               <div>
                  <a href="#">
                     <img src="bookmark.png" class="triggerBookmarks" style="padding: 5px; margin: 5px 0px 5px 5px" />
                  </a>
               </div>
            </div>
         </td>
         <td style="border: 1px solid #aaaaaa">
            <div style="float: left">
               <div class="panel" style="height: 70%">
                  <tc:PdfThumbnailsList ID="thumbnails" runat="server" PdfViewerControlId="pdfViewer"
                     Width="160" Height="600" ServiceUrl="pageasimage.ashx" ThumbnailCssClass="thumb"
                     SelectedThumbnailCssClass="active" />
               </div>
            </div>
            <div style="float: left">
               <div class="bkmPanel" style="height: 70%">
                  <tc:PdfBookmarksList ID="Bookmarks" runat="server" IsExpanded="true" BorderWidth="1"
                     BorderColor="#aaaaaa" PdfViewerControlId="pdfViewer" Width="300" Height="600"
                     BookmarkCssClass="bookmark" SelectedBookmarkCssClass="activeBookmark" />
               </div>
            </div>
         </td>
         <td valign="top" style="border: 1px solid #aaaaaa">
            <tc:PdfViewerToolbar ID="Toolbar" runat="server" class="toolbar" PdfViewerControlId="pdfViewer"
               ShowFileButtons="true" />
            <tc:PdfViewer ID="pdfViewer" runat="server" Width="800" Height="576" ZoomMode="FitToPage"
               ServiceUrl="pageasimage.ashx" SearchServiceUrl="search.ashx" SearchResultCssClass="searchResult" />
         </td>
         <td style="width: 260px; padding-left: 10px;" valign="top">
            <h2>
               JavaScript interaction</h2>
            <fieldset>
               <legend>Full-text Searching</legend>
               <p>
                  <asp:TextBox runat="server" ID="TextFind" Width="200px" /><br />
                  <asp:CheckBox ID="checkMatchCase" runat="server" Text="Match case" />
                  <asp:CheckBox ID="checkMatchWord" runat="server" Text="Match whole word" /><br />
                  <asp:Button runat="server" ID="buttonFind" Text="Find" />
                  <asp:Button runat="server" ID="buttonCancel" Text="Cancel" Enabled="false" />
               </p>
               <p id="results">
               </p>
            </fieldset>
            <fieldset>
               <legend>Document information</legend>
               <p>
                  <input type="button" onclick="showDocInfo(); return false;" value="Show document info" /></p>
            </fieldset>
            <fieldset>
               <legend>Viewer control</legend>
               <p>
                  Mode : <a href="#" onclick="$find('pdfViewer').set_cursorMode('zoomIn')">zoom in</a>
                  <a href="#" onclick="$find('pdfViewer').set_cursorMode('zoomOut')">zoom out</a>
                  <a href="#" onclick="$find('pdfViewer').set_cursorMode('pan')">pan</a></p>
               <p>
                  Scroll to : <a href="#" onclick="scrollTo('bottom')">bottom</a> <a href="#" onclick="scrollTo('top')">
                     top</a> <a href="#" onclick="scrollTo('left')">left</a> <a href="#" onclick="scrollTo('right')">
                        right</a></p>
               <p>
                  Rotate page: <a href="#" onclick="rotate(0)">0</a> <a href="#" onclick="rotate(90)">
                     90</a> <a href="#" onclick="rotate(180)">180</a> <a href="#" onclick="rotate(270)">
                        270</a></p>
               <p>
                  Resize viewer:
                  <table>
                     <tr>
                        <th>
                           Width
                        </th>
                        <td>
                           <input type="text" maxlength="3" id="width" size="3" style="width: 50px;" />
                        </td>
                     </tr>
                     <tr>
                        <th>
                           Height
                        </th>
                        <td>
                           <input type="text" id="height" maxlength="3" size="3" style="width: 50px;" />
                        </td>
                     </tr>
                  </table>
                  <br />
                  <a href="#" onclick="$find('pdfViewer').set_size({ width : document.getElementById('width').value, height : document.getElementById('height').value}); return false;">
                     Resize</a></p>
            </fieldset>
         </td>
      </tr>
   </table>
   </form>
   <script type="text/javascript">
      function showDocInfo() {
         var viewer = $find('pdfViewer');
         if (viewer) {
            var doc = viewer.get_document();
            if (!doc.IsValid) {
               alert("No document loaded.");
            }
            else {
               alert(
               "Title: " + doc.DocumentInfo.Title +
               "\nSubject: " + doc.DocumentInfo.Subject +
               "\nKeywords: " + doc.DocumentInfo.Keywords +
               "\nAuthor: " + doc.DocumentInfo.Author +
               "\nCreator: " + doc.DocumentInfo.Creator +
               "\n\nPages: " + doc.Pages.length);

            }
         }
      }
      function scrollTo(position) {
         var viewer = $find('pdfViewer');
         var pageIndex = viewer.get_pageIndex();
         var page = viewer.get_document().Pages[pageIndex];
         switch (position) {
            case 'bottom':
               viewer.goTo(pageIndex, null, { y: page.Height });
               break;
            case 'top':
               viewer.goTo(pageIndex, null, { y: 0 });
               break;
            case 'left':
               viewer.goTo(pageIndex, null, { x: 0 });
               break;
            case 'right':
               viewer.goTo(pageIndex, null, { x: page.Width });
               break;
         }
      }
      function rotate(rotation) {
         var viewer = $find('pdfViewer');
         viewer.rotate(rotation);
         return false;
      }
      Sys.Application.add_init(function () {
         var control = $find("pdfViewer");
         control.add_updated(function () {
            var size = control.get_size();
            document.getElementById('width').value = size.width;
            document.getElementById('height').value = size.height;
         });
      });
   </script>
</body>
</html>
